<template>
  <div class="recommend">
    <VideoCard
      v-for="item in indexInfoList"
      :key="item"
      class="recommend_item"
      :itemInfo="item"
    />
    <div class="rem_btn" v-show="!isAppAdd">
      <el-button type="primary" size="default" @click="addIndexInfoList">加载更多</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Recommend",
});
</script>
<script lang="ts" setup>
import { storeToRefs } from "pinia";
import useIdenxState from "@/views/Index/hooks";
import VideoCard from "../VideoCard/VideoCard.vue";
const idenxState = useIdenxState();
const { indexInfoList, isAppAdd } = storeToRefs(idenxState);
const {addIndexInfoList} = idenxState;
</script>
<style scoped lang="scss">
.recommend {
  display: flex;
  justify-self: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .recommend_item {
    // width: 20%;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .rem_btn {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>
